<template>
  <div>
    <div class="search-top">
      <van-search v-model="value" placeholder="请输入搜索关键词" show-action>
        <template #label>
          <label for="" @click="$router.push('/city')"
            >{{ cname }}&nbsp;<van-icon name="arrow-down"
          /></label>
        </template>
        <template #action>
          <van-icon name="aim" size="25" @click="$router.push('/map')" />
        </template>
      </van-search>
    </div>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swiperList" :key="item.id">
        <img :src="'http://liufusong.top:8080' + item.imgSrc" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- 中间四个模块 -->
    <van-grid :border="false">
      <van-grid-item icon="wap-home" text="整租" to="/search" />
      <van-grid-item icon="friends" text="合租" to="/search" />
      <van-grid-item icon="map-marked" text="地图找房" to="/map" />
      <van-grid-item icon="bill" text="去出租" @click="$toast('暂未开放')" />
    </van-grid>

    <!-- 租房小组 -->
    <div class="group">
      <div class="title clearfix">
        <span class="left"><h4>租房小组</h4></span>
        <span class="right">更多</span>
      </div>
      <van-grid :gutter="10" direction="horizontal" :column-num="2">
        <van-grid-item
          v-for="item in gruopList"
          :key="item.id"
          class="gruop-item"
        >
          <template #default>
            <img
              :src="'http://liufusong.top:8080' + item.imgSrc"
              class="group-img"
            />
            <div>
              <p>{{ item.title }}</p>
              <p>{{ item.desc }}</p>
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getGruop, getSwiper } from '@/api/index'
export default {
  name: 'index-page',
  async created() {
    const res = await getSwiper()
    console.log(res)
    this.swiperList = res.body

    const res2 = await getGruop()
    console.log(res2)
    this.gruopList = res2.body
  },
  data() {
    return {
      value: '',
      swiperList: [],
      gruopList: [],
      cname: JSON.parse(localStorage.getItem('cinfo'))
        ? JSON.parse(localStorage.getItem('cinfo')).label
        : '北京'
    }
  },
  methods: {
    onSearch(val) {
      this.$toast(val)
    },
    onCancel() {
      this.$toast('取消')
    }
  }
}
</script>

<style scoped lang="less">
.van-search {
  line-height: 55px;
  margin-top: 10px;
  // position: fixed;
  // top: 0;
  // left: 0;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background: transparent;
  z-index: 1;
}
.van-icon-aim {
  margin-top: 10px;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
  height: 212px;
  > img {
    width: 100%;
    height: 100%;
  }
}
.van-grid {
  height: 122px;
}
.van-grid-item__content {
  padding: 0;
}
.gruop-item {
  height: 65px;
}
.van-grid-item__content {
  border-radius: 15px !important;
}
.group {
  background-color: #f6f5f6;
  height: 200px;
  > .title {
    height: 50px;
    padding: 15px 10px 15px 15px;
    > .left {
      float: left;
    }
    > .right {
      float: right;
    }
  }
}
.group-img {
  width: 50px;
  height: 50px;
  margin: 0 10px;
  float: left;
}
</style>
